<template>
  <div class="main">
    <div class="assign-box">
      <el-cascader v-model="value" :options="options" :props="props" clearable @change="handleChange" ref="cascader">
      </el-cascader>

    </div>
    <div class="assign-box">
      <el-button type="primary" @click="uploadArray">添加</el-button>
    </div>
    <div class="assign-box">
      <el-tag v-for="(tag, index) in tags" effect="dark" :key="index" @close="handleClose(tag)" closable>
        {{ tag.name }}
      </el-tag>

    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      value: [],
      props: { expandTrigger: 'hover', value: 'warehouseNo', label: 'warehouseName',checkStrictly :true },
      options: [
        {
          "createBy": null,
          "createTime": "2024-06-05 20:12:57",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "examineAuthority": 0,
          "id": 1,
          "warehouseName": "鼎折覆餗",
          "warehouseNo": "156462313",
          "warehouseType": 1,
          "storageType": 2,
          "capacity": 33,
          "unit": "1",
          "buildingArea": 333,
          "province": "内蒙古自治区",
          "city": "乌海市",
          "county": "海南区",
          "address": "啥地方",
          "warehouseManageUid": 1,
          "manageMobile": "13584121111",
          "status": 1,
          "isClass": 1,
          "pid": null,
          "warehousePermission": null,
          "children": [
            {
              "createBy": null,
              "createTime": "2024-06-05 20:56:42",
              "updateBy": null,
              "updateTime": null,
              "remark": null,
              "examineAuthority": 0,
              "id": 2,
              "warehouseName": "玛玛哈哈",
              "warehouseNo": "564611",
              "warehouseType": null,
              "storageType": null,
              "capacity": 332,
              "unit": "2",
              "buildingArea": 45646,
              "province": null,
              "city": null,
              "county": null,
              "address": null,
              "warehouseManageUid": 1,
              "manageMobile": "13584512111",
              "status": 0,
              "isClass": 1,
              "pid": 1,
              "warehousePermission": null,
              "children": [
                {
                  "createBy": null,
                  "createTime": "2024-06-05 20:58:06",
                  "updateBy": null,
                  "updateTime": null,
                  "remark": null,
                  "examineAuthority": 0,
                  "id": 3,
                  "warehouseName": "玛玛哈哈222",
                  "warehouseNo": "5464",
                  "warehouseType": null,
                  "storageType": null,
                  "capacity": 89,
                  "unit": "1",
                  "buildingArea": 123,
                  "province": null,
                  "city": null,
                  "county": null,
                  "address": null,
                  "warehouseManageUid": 1,
                  "manageMobile": "13845121111",
                  "status": 0,
                  "isClass": 0,
                  "pid": 2,
                  "warehousePermission": null,
                  "children": null,
                  "addressCode": null,
                  "nickName": "若依",
                  "source": null
                }
              ],
              "addressCode": null,
              "nickName": "若依",
              "source": null
            },
            {
              "createBy": null,
              "createTime": "2024-06-06 17:17:14",
              "updateBy": null,
              "updateTime": null,
              "remark": null,
              "examineAuthority": 0,
              "id": 5,
              "warehouseName": "二哥发顺丰",
              "warehouseNo": "45646",
              "warehouseType": 4,
              "storageType": null,
              "capacity": 995,
              "unit": "2",
              "buildingArea": 56,
              "province": null,
              "city": null,
              "county": null,
              "address": null,
              "warehouseManageUid": 1,
              "manageMobile": "13854212111",
              "status": 1,
              "isClass": 0,
              "pid": 1,
              "warehousePermission": null,
              "children": null,
              "addressCode": null,
              "nickName": "若依",
              "source": null
            },
            {
              "createBy": null,
              "createTime": "2024-06-19 10:38:25",
              "updateBy": null,
              "updateTime": null,
              "remark": null,
              "examineAuthority": 0,
              "id": 7,
              "warehouseName": "不大舒服",
              "warehouseNo": "24345234",
              "warehouseType": 4,
              "storageType": null,
              "capacity": 3654,
              "unit": "1",
              "buildingArea": 54,
              "province": null,
              "city": null,
              "county": null,
              "address": null,
              "warehouseManageUid": 1,
              "manageMobile": "18765411111",
              "status": 1,
              "isClass": 1,
              "pid": 1,
              "warehousePermission": null,
              "children": [
                {
                  "createBy": null,
                  "createTime": "2024-06-19 10:38:49",
                  "updateBy": null,
                  "updateTime": null,
                  "remark": null,
                  "examineAuthority": 0,
                  "id": 8,
                  "warehouseName": "发生的",
                  "warehouseNo": "1231",
                  "warehouseType": 4,
                  "storageType": null,
                  "capacity": 543,
                  "unit": "1",
                  "buildingArea": 1345,
                  "province": null,
                  "city": null,
                  "county": null,
                  "address": null,
                  "warehouseManageUid": 2,
                  "manageMobile": "19542111111",
                  "status": 1,
                  "isClass": 0,
                  "pid": 7,
                  "warehousePermission": null,
                  "children": null,
                  "addressCode": null,
                  "nickName": "若依222",
                  "source": null
                },
                {
                  "createBy": null,
                  "createTime": "2024-06-19 10:39:17",
                  "updateBy": null,
                  "updateTime": null,
                  "remark": null,
                  "examineAuthority": 0,
                  "id": 9,
                  "warehouseName": "阿第三十",
                  "warehouseNo": "64646",
                  "warehouseType": 4,
                  "storageType": null,
                  "capacity": 5463,
                  "unit": "2",
                  "buildingArea": 12,
                  "province": null,
                  "city": null,
                  "county": null,
                  "address": null,
                  "warehouseManageUid": 1,
                  "manageMobile": "18644211111",
                  "status": 1,
                  "isClass": 0,
                  "pid": 7,
                  "warehousePermission": null,
                  "children": null,
                  "addressCode": null,
                  "nickName": "若依",
                  "source": null
                }
              ],
              "addressCode": null,
              "nickName": "若依",
              "source": null
            }
          ],
          "addressCode": "15,1503,150303",
          "nickName": "若依",
          "source": null
        },
        {
          "createBy": null,
          "createTime": "2024-06-06 16:26:00",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "examineAuthority": 0,
          "id": 4,
          "warehouseName": "对光反射",
          "warehouseNo": "464346",
          "warehouseType": 4,
          "storageType": 2,
          "capacity": 56,
          "unit": "2",
          "buildingArea": 214,
          "province": "河北省",
          "city": "秦皇岛市",
          "county": "北戴河区",
          "address": "梵蒂冈的",
          "warehouseManageUid": 1,
          "manageMobile": "13854512111",
          "status": 1,
          "isClass": 0,
          "pid": null,
          "warehousePermission": null,
          "children": null,
          "addressCode": "13,1303,130304",
          "nickName": "若依",
          "source": null
        }
      ],//默认配置
      tags: [],//显示标签列表
      commonText: '',//选中 文字 字符串
      commonId: '',//选中 id 字符串
    };
  },
  methods: {
    handleChange() {
      this.commonId = JSON.parse(JSON.stringify(this.value)).join(',');
      this.commonText = this.$refs.cascader.getCheckedNodes()[0].pathLabels.join('-');
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    uploadArray() {
      if (this.value.length == 0) {
        this.option ? this.option.close() : "";
        this.option = this.$message.error("请选择仓库");
        return
      }
      let newTagsObject = {};
      newTagsObject.name = this.commonText;
      newTagsObject.id = this.commonId;
      let isRepeat = false;
      for (let i = 0; i < this.tags.length; i++) {
        if (this.tags[i].id == newTagsObject.id && this.tags[i].name == newTagsObject.name) {
          isRepeat = true;
          break;
        }
      }
      let isExits = false;
      let index = 0;
      if (!isRepeat) {
        let newTagStr = newTagsObject.id.split(',');
        for (let i = 0; i < this.tags.length; i++) {
          let oldTagStr = this.tags[i].id.split(',');
          if (newTagStr[0] == oldTagStr[0]) {
            isExits = true;
            index = i;
            break;
          }
        }
      }
      if (!isExits) {
        this.tags.push(newTagsObject);
      } else {
        this.$set(this.tags, index, newTagsObject)
      }
    }
  }
};
</script>



<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  padding: 50px;
  box-sizing: border-box;

  .assign-box {
    margin-bottom: 20px;

    .el-tag {
      margin: 10px;
    }

    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>